<template>
	<view class="user-profile">
	    <!-- 用户头像和信息区域 -->
	    <view class="header">
	      <image :src="avatar" class="avatar" mode="aspectFill"></image>
	      <text v-if="!isLoggedIn" class="greeting">HI~欢迎回来</text>
	      <text v-else class="username">{{ username }}</text>
		  <navigator url='/pages/login/login'>
	      <button v-if="!isLoggedIn" class="login-btn">登录</button>
		  </navigator>
	    </view>
	    <!-- 发布区域 -->
	    <view class="publish-area">
	      <text v-if="isLoggedIn" class="publish-btn">我也要发布</text>
	      <text v-else class="visit-btn">先去逛逛 >></text>
	    </view>
	  </view>
	</template>

<script>
export default {
	name: "UserInfoView",
	data() {
		return {
			isLoggedIn: false, // 登录状态
			username: '',       // 用户名
			avatar: '/static/DefaultAvatar.png', // 默认头像
		};
	},
	mounted() {
		// 检查本地存储是否已登录
		const userInfo = uni.getStorageSync('userInfo');
		if (userInfo) {
			this.isLoggedIn = true;
			this.username = userInfo.username;
			this.avatar = userInfo.avatar || this.avatar;
		}
	},
	methods: {
		goToLogin() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
	}
};
</script>

<style>
.user-profile {
  background-color: #f8f8f8;
  padding: 20rpx;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-bottom: 10rpx;
}

.greeting {
  font-size: 32rpx;
  color: #333;
  text-align: center;
}

.login-btn {
  width: 120rpx;
  height: 60rpx;
  background-color: #ff3b30;
  color: white;
  font-size: 28rpx;
  border-radius: 30rpx;
  margin-top: 10rpx;
  line-height: 60rpx;
  border: none;
}

.username {
  font-size: 32rpx;
  color: #333;
  margin-top: 10rpx;
}

.publish-area {
  text-align: center;
  margin-bottom: 20rpx;
}

.publish-btn {
  color: #ff3b30;
  font-size: 28rpx;
  font-weight: bold;
}

.visit-btn {
  color: #999;
  font-size: 28rpx;
}
</style>